<template>
    <div>
        <h1>CKEditor测试</h1>
        <div id="toolbar-container"></div>	<!-- 编辑器容器 -->
        <div id="editor">
            <!-- <p>This is the initial editor content.</p> -->
        </div>
        
        <div id="toolbar-container"></div>
        <div id="editor">
        </div>
        <button @click="post_editor">提交</button>
    </div>
</template>

<script>
import CKEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn"; //中文包
export default {
    data() {
        return {
     		editor: null, // 编辑器实例
            
        }
    },
    mounted() {
  	    this.initCKEditor();
    },
    methods: {
    initCKEditor() {
      CKEditor.create(document.querySelector("#editor"), {
        ckfinder: {
          uploadUrl: "/api/ck_upload/"
          // 接口返回需要：包括uploaded(选项true/false)，url两个字段
        }
      })
        .then(editor => {
          const toolbarContainer = document.querySelector("#toolbar-container");
          toolbarContainer.appendChild(editor.ui.view.toolbar.element);
          this.editor = editor; //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
        })
        .catch(error => {
          console.error(error);
        });
    },
    ck_post() {
    axios.post("/api/ck_post/", {
      	data: this.editor.getData() // 获取了编辑器的所有内容
    }).then(res=>{
        console.log(res.data)
    })
}
}
}
</script>

<style lang="">
    
</style>